<%@ page contentType="text/html;charset=UTF-8" %>
<%@ page import="org.apache.shiro.web.filter.authc.FormAuthenticationFilter"%>
<%@ page import="org.apache.shiro.authc.ExcessiveAttemptsException"%>
<%@ page import="org.apache.shiro.authc.IncorrectCredentialsException"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>

<!DOCTYPE html>
<html class="login-bg">
<head>
	<title>Detail Admin - Sign in</title>
    
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	
    <!-- bootstrap -->
    <link href="${ctx }/static/css/bootstrap/bootstrap.css" rel="stylesheet" />
    <link href="${ctx }/static/css/bootstrap/bootstrap-responsive.css" rel="stylesheet" />
    <link href="${ctx }/static/css/bootstrap/bootstrap-overrides.css" type="text/css" rel="stylesheet" />

    <!-- global styles -->
    <link rel="stylesheet" type="text/css" href="${ctx }/static/css/layout.css" />
    <link rel="stylesheet" type="text/css" href="${ctx }/static/css/elements.css" />
    <link rel="stylesheet" type="text/css" href="${ctx }/static/css/icons.css" />

    <!-- libraries -->
    <link rel="stylesheet" type="text/css" href="${ctx }/static/css/lib/font-awesome.css" />
    
    <!-- this page specific styles -->
    <link rel="stylesheet" href="${ctx }/static/css/compiled/signin.css" type="text/css" media="screen" />


    <!--[if lt IE 9]>
      <script src="${ctx }/static/js/html5shiv.min.js"></script>
    <![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body>
	<!-- background switcher -->
    <div class="bg-switch visible-desktop">
        <div class="bgs">
            <a href="#" data-images="landscape.jpg" class="bg active">
                <img src="${ctx }/static/images/bgs/landscape.jpg" />
            </a>
            <a href="#" data-images="blueish.jpg" class="bg">
                <img src="${ctx }/static/images/bgs/blueish.jpg" />
            </a>            
            <a href="#" data-images="7.jpg" class="bg">
                <img src="${ctx }/static/images/bgs/7.jpg" />
            </a>
            <a href="#" data-images="8.jpg" class="bg">
                <img src="${ctx }/static/images/bgs/8.jpg" />
            </a>
            <a href="#" data-images="9.jpg" class="bg">
                <img src="${ctx }/static/images/bgs/9.jpg" />
            </a>
            <a href="#" data-images="10.jpg" class="bg">
                <img src="${ctx }/static/images/bgs/10.jpg" />
            </a>
            <a href="#" data-images="11.jpg" class="bg">
                <img src="${ctx }/static/images/bgs/11.jpg" />
            </a>
        </div>
    </div>
	<div class="row-fluid login-wrapper">
		<form id="loginForm" action="${ctx}/login" method="post">
        <a href="${ctx }/index">
            <img class="logo" src="${ctx }/static/images/logo.png" />
        </a>

        <div class="span4 box">
            <div class="content-wrap">
                <h6>登录服务器监控平台</h6>
				<%
				String error = (String) request.getAttribute(FormAuthenticationFilter.DEFAULT_ERROR_KEY_ATTRIBUTE_NAME);
				if(error != null){
				%>
                <h6 class="text-error">登录失败，请重试.</h6>
				<%
				}
				%>
                <input class="span12" type="text" name="username" value="${username }" placeholder="用户名" />
                <input class="span12" type="password" name="password" placeholder="密码" />
                <a href="#" class="forgot">忘记密码?</a>
                <div class="remember">
                    <input id="remember-me" type="checkbox" />
                    <label for="remember-me">记住我</label>
                </div>
                <input type="submit" class="btn-glow primary login" value="登录">
            </div>
        </div>

        <div class="span4 no-account">
            <p>没有账号?</p>
            <a href="${ctx }/register">注册</a>
        </div>
		</form>
    </div>
	<!-- scripts -->
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="${ctx}/static/js/bootstrap.min.js"></script>
    <script src="${ctx}/static/js/theme.js"></script>
    <script src="${ctx }/static/js/jquery.validate.min.js"></script>
    <script src="${ctx }/static/js/localization/messages_zh.min.js"></script>
    <!-- pre load bg imagess -->
    <script type="text/javascript">
        $(function () {
			$("#loginForm").validate();
            // bg switcher
            var $btns = $(".bg-switch .bg");
            $btns.click(function (e) {
                e.preventDefault();
                $btns.removeClass("active");
                $(this).addClass("active");
                var bg = $(this).data("images");

                $("html").css("background-image", "url('${ctx}/static/images/bgs/" + bg + "')");
            });

        });
    </script>
    
</body>
</html>
